<template>
	<view>
		<!-- 滑动操作 -->
		<uni-swipe-action>
			<!-- 画家列表 -->
			<uni-list class="list-news" v-for="(item,index) of listExhibition" :key="index">
				<view class="search">
					<uni-swipe-action-item>
						<image :src="item.eventPoster" mode="aspectFit" class="image-news" @click="toDetail(item.id)"></image>
						<view class="time-news" @click="collect(item.id)">收藏({{item.collectNum}})</view>
						<view class="time-browseNum">浏览({{item.browseMum}})</view>
						<view class="title-news">展览：{{item.exhibitioTitel}}</view>
					</uni-swipe-action-item>
				</view>
			</uni-list>
		</uni-swipe-action>
		
		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'

//封装axios请求
import Vue from 'vue'
import axios from 'axios'

	export default {
		data() {
			return {
				//当前选项卡
				currentTab: '/pages/exhibitionList/exhibitionManager',
				listExhibition: [],
				pageIndex: 1,
				pageSize: 10,
				totalCount:0,
				hasMore: true,
			}
		},
		methods: {
				fetchData() {
					uni.request({
						url: global.baseUrl + 'api/exhibition/list', // 接口地址
						method: 'get',
						dataType: "json",
						data:{
							pageIndex: this.pageIndex,
							pageSize: this.pageSize,
							orderBy: "id:DESC",
							hasMore: true
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						},
						success: (res) => {
							if (res.data.code == 0) {
								this.listExhibition = res.data.data

							} else {
								console.log("request result error: ", res.data.code)
							}
						},
						fail: (error) => {
							console.log(error)
						}
					})
				},
				collect(id) {
				var token = uni.getStorageSync("token")
				console.log("caches get  token value :  ", token)
				uni.request({
					url: global.baseUrl + 'api/userCollec/collection', // 接口地址
					method: 'get',
					dataType: "json",
					data:{
						id: id,
						collectoonType: 6
					},
					header: {
						'X-Token': token
					},
					success: (res) => {
						console.log("request collection art result  code : ", res)
						if (res.data.code == 0) {
							uni.showToast({ title: res.data.msg, icon: 'none' });
						} 
					},
					fail: (error) => {
						console.log(error)
					}
				})
			},
			toDetail(id) {
				console.log("List item id :  " , id)
					uni.navigateTo({
					url: '../exhibitionList/specialDetail?id=' + id,
				})
			}
		},
		onLoad() {
			this.fetchData() // 在页面加载时调用fetchData方法获取数据
		},
		onReachBottom(){
		    console.log('触底了')
			    if (this.pageIndex * this.pageSize >= this.totalCount) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.pageIndex <= this.pageIndex - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.pageIndex++
						this.fetchData()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
		// 页面下拉时触发，与 onLoad 等生命周期函数平级
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        // 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
		        uni.stopPullDownRefresh();
		    }, 1000);
		}
	}
</script>

<style scoped>
	.list-news {
		width: 94%;
		margin: auto;
	}
 
	.search {
		margin-top: 10rpx;
		position: relative;
		height: 210rpx;
	}
 
	.image-news {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
	}
 
	.time-news {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
	
	.time-browseNum{
		position: absolute;
		right: 10rpx;
		top: 60rpx;
	}
 
	.title-news {
		width: 480rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: absolute;
		bottom: 10rpx;
		left: 220rpx;
	}
</style>
